import React, { Component } from "react";
// import "./viedo.css"
import { Carousel, WingBlank } from 'antd-mobile';
import '../../fonts/iconfont.css'
import './FM.css'
import { Link, withRouter } from 'react-router-dom'
import { single, djRecommend, program } from '../../../api/index'
// import creatHistory from 'history/createBrowserHistory'
import Footer from '../../footer/footer'


// const history = creatHistory();


//轮播图
class Swip extends React.Component {
    state = {
        data: ['1', '2', '3'],
        imgHeight: 176,

    }
    componentDidMount() {

        single().then(res => {
            this.setState({ data: res.data.result })

        })


    }
    render() {
        return (
            <WingBlank>
                <Carousel
                    autoplay={true}
                    infinite
                // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                // afterChange={index => console.log('slide to', index)}
                >
                    {this.state.data.map(val => (
                        <a
                            key={val}
                            href="javascript:;"
                            style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                        >
                            <img
                                src={val.sPicUrl}
                                alt=""
                                style={{ width: '100%', verticalAlign: 'top' }}
                                onLoad={() => {
                                    // fire window resize event to change height
                                    window.dispatchEvent(new Event('resize'));
                                    this.setState({ imgHeight: 'auto' });
                                }}
                            />
                        </a>
                    ))}
                </Carousel>
            </WingBlank>
        );
    }
}


//主播电台
class FM extends Component {
    state = {
        djRecommend: [],
        program: [{ id: '1', coverUrl: '', description: '', name: '', channels: [] ,radio:{id:'2'}}]


    }
    componentDidMount() {
        djRecommend().then(res => {
            this.setState({ djRecommend: res.data.djRadios })
        })
        program().then(res => {
            this.setState({ program: res.data.programs })
        })

    }
    goback() {
        this.props.history.go(-1)
    }

    render(props) {
        console.log(this.state, this.props)
        return (
            <div className="SongList">
                <div id="djHead">

                    <span className="iconfont icon-houtui" onClick={this.goback.bind(this)}></span>

                    <span>电台</span>
                    <span className="iconfont icon-paihangbang"></span>
                </div>
                <div id="djBody">
                    <Swip />
                    <div id="fmClassification">
                        <Link to='/FM/catelist'>
                            <div className="Classification">

                                <span className="iconfont icon-fenlei"></span>
                                <span>
                                    电台分类
                                </span>


                            </div>
                        </Link>
                        <Link to='/FM/range'>
                            <div className="Classification">

                                <span className="iconfont icon-PCbofangye_paihangbang"></span>
                                <span>
                                    电台排行
                                </span>


                            </div>
                        </Link>
                        <Link to='/FM/paygift'>
                            <div className="Classification">

                                <span className="iconfont icon-huangguan"></span>
                                <span>
                                    付费精品
                                </span>


                            </div>
                        </Link>
                        <Link to='/FM/lesson'>
                            <div className="Classification">

                                <span className="iconfont icon-diantai"></span>
                                <span>
                                    音乐课堂
                                </span>


                            </div>
                        </Link>
                    </div>


                    {/* 电台推荐 */}


                    <div id="djTitle" className="clear">
                        <b>电台推荐</b>


                        <div className="sss">
                            <span className="iconfont   icon-huanyihuan"></span>
                            <span onClick={() => {
                                // Fisher–Yates洗牌算法
                                Array.prototype.shuffle = function () {
                                    var array = this;
                                    var m = array.length,
                                        t, i;
                                    while (m) {
                                        i = Math.floor(Math.random() * m--);
                                        t = array[m];
                                        array[m] = array[i];
                                        array[i] = t;
                                    }
                                    return array;
                                }
                                let data = this.state.djRecommend.shuffle()
                                this.setState({ djRecommend: data })

                            }}>换一换
                    </span>
                        </div>
                    </div>
                    <div id="djRecommend" className="clear">
                        <ul>
                            {this.state.djRecommend.filter((item, i) => {
                                if (i < 3) {
                                    return item
                                }
                            })
                                .map(item => {
                                    return (

                                        <li key={item.id} className="djRecommend" >

                                            <img src={item.picUrl} alt="" onClick={() => {
                                                console.log(item.id)
                                                let id = item.id
                                                this.props.history.push({ pathname: "/FM/djDetails/" + id });
                                            }} />
                                            <span>{item.name}</span>
                                            <p>{item.rcmdtext}</p>


                                        </li>
                                    )
                                })}
                        </ul>
                    </div>

                    {/* 电台节目 */}
                    <b>推荐节目</b>
                    <div id="program">
                        {this.state.program.filter(item => {
                            if (item.channels[0] != null) {
                                return item
                            }
                        })
                            .map(item => {
                                console.log(item)
                                return (
                                    <div key={item.id} className="radioProgram clear" onClick={() => {
                                        let id = item.radio.id
                                        this.props.history.push({ pathname: "/FM/djDetails/" + id});
                                    }}>
                                        <img src={item.coverUrl} alt="" />
                                        <h5>{item.name}</h5>
                                        <p>{item.description}</p>
                                        <li>{item.channels[0]}</li>
                                    </div>
                                )
                            })}
                    </div>



                </div>
                <Footer />
            </div>

        )
    }
}

export default withRouter(FM)